import React, { PureComponent, Fragment } from 'react';
import { Form, Modal, Radio, Upload, Icon } from 'antd';
import { connect } from 'dva';

const RadioGroup = Radio.Group;
const FormItem = Form.Item;

@connect(({ Account, global, loading }) => ({
  Account,
  global,
}))
@Form.create()
class uploadFile extends PureComponent {
  constructor(props) {
    super(props);

    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
    this.state = {
      value: 1,
      cardList: [],
      cardBackList: [],
      threeCardsTogetherList: [],
      businessLicenseList: [],
      orgCodeList: [],
      bankOpeningPermitList: [],
      taxRegistrationList: [],
    };
  }

  customRequest = (componentsData, type) => {
    let _this = this;
    const { dispatch, form } = this.props;
    let originFile = componentsData.file;
    const formData = new FormData();
    formData.append('multipartFile', originFile);
    formData.append('name', originFile.name);
    formData.append('uid', originFile.uid);
    formData.append('dir', 'data');
    dispatch({
      type: 'global/upload',
      payload: formData,
      callback(res) {
        if (res.code === 200) {
          let obj = {
            ...res.msg,
          };
          form.setFieldsValue({
            [type]: res.msg.url,
          });
          _this.handleChange(type, [obj]);
        }
      },
    });
  };
  handleChange = (type, info) => {
    let logoList = info;
    logoList = logoList.map(file => {
      if (file.response) {
        file.url = file.response.url;
      }
      return file;
    });

    logoList = logoList.filter(file => {
      if (file.response) {
        return file.response.status === 'success';
      }
      return true;
    });

    if (type === 'cardFacade') {
      console.log(1);
      this.setState({ cardList: logoList });
    } else if (type === 'cardBack') {
      console.log(2);
      this.setState({ cardBackList: logoList });
    } else if (type === 'threeCardsTogether') {
      console.log(3);
      this.setState({ threeCardsTogetherList: logoList });
    } else if (type === 'orgCode') {
      console.log(4);
      this.setState({ orgCodeList: logoList });
    } else if (type === 'taxRegistration') {
      console.log(5);
      this.setState({ taxRegistrationList: logoList });
    } else if (type === 'businessLicense') {
      console.log(6);
      this.setState({ businessLicenseList: logoList });
    }else if(type==='bankOpeningPermit'){
      this.setState({ bankOpeningPermitList: logoList });
    }
  };
  onChange = e => {
    this.setState({
      value: e.target.value,
    });
  };
  // 表单
  renderContent = () => {
    const { form, values = {} } = this.props;
    const logoProps = {
      action: `/img/upload`,
      showUploadList: { showPreviewIcon: true, showRemoveIcon: false },
      multiple: false,
      listType: 'picture-card',
      className: 'upload-list-inline',
    };
    const customRequest0 = {
      ...logoProps,
      customRequest: event => this.customRequest(event, 'bankOpeningPermit'),
    };
    const customRequest1 = {
      ...logoProps,
      customRequest: event => this.customRequest(event, 'cardFacade'),
    };
    const customRequest2 = {
      ...logoProps,
      customRequest: event => this.customRequest(event, 'cardBack'),
    };
    const customRequest3 = {
      ...logoProps,
      customRequest: event => this.customRequest(event, 'threeCardsTogether'),
    };
    const customRequest4 = {
      ...logoProps,
      customRequest: event => this.customRequest(event, 'businessLicense'),
    };
    const customRequest5 = {
      ...logoProps,
      customRequest: event => this.customRequest(event, 'orgCode'),
    };
    const customRequest6 = {
      ...logoProps,
      customRequest: event => this.customRequest(event, 'taxRegistration'),
    };
    const {
      cardList,
      cardBackList,
      threeCardsTogetherList,
      businessLicenseList,
      orgCodeList,
      taxRegistrationList,
      bankOpeningPermitList,
    } = this.state;
    return [
      <FormItem key="pwd" {...this.formLayout} label="类型">
        <RadioGroup onChange={this.onChange} value={this.state.value}>
          <Radio value={1}>三证合一</Radio>
          <Radio value={2}>其他</Radio>
        </RadioGroup>
      </FormItem>,
      <FormItem key="bankOpeningPermit" {...this.formLayout} label="开户银行许可证">
        {bankOpeningPermitList.length > 0
          ? form.getFieldDecorator('bankOpeningPermit', {
              rules: [{ required: true, message: '请上传开户银行许可证！' }],
              initialValue: values.bankOpeningPermit,
            })(
              <Upload {...customRequest0} fileList={bankOpeningPermitList}>
                开户银行许可证
              </Upload>
            )
          : form.getFieldDecorator('bankOpeningPermit', {
              rules: [{ required: true, message: '请上传开户银行许可证！' }],
              initialValue: values.bankOpeningPermit,
            })(
              <Upload
                {...customRequest0}
                fileList={
                  values.bankOpeningPermit
                    ? [
                        {
                          name: values.bankOpeningPermit,
                          uid: 1,
                          url: values.bankOpeningPermit,
                        },
                      ]
                    : []
                }
              >
                开户银行许可证
              </Upload>
            )}
      </FormItem>,
      <FormItem key="cardFacade" {...this.formLayout} label="身份证正面">
        {cardList.length > 0
          ? form.getFieldDecorator('cardFacade', {
            rules: [{ required: true, message: '请上传身份证正面！' }],
            initialValue: values.cardFacade,
          })(
            <Upload {...customRequest1} fileList={cardList}>
              身份证正面
            </Upload>
          )
          : form.getFieldDecorator('cardFacade', {
            rules: [{ required: true, message: '请上传身份证正面！' }],
            initialValue: values.cardFacade,
          })(
            <Upload
              {...customRequest1}
              fileList={
                values.cardFacade
                  ? [
                    {
                      name: values.cardFacade,
                      uid: 1,
                      url: values.cardFacade,
                    },
                  ]
                  : []
              }
            >
              身份证正面
            </Upload>
          )}
      </FormItem>,
      <FormItem key="brandLogo" {...this.formLayout} label="身份证反面">
        {cardBackList.length > 0
          ? form.getFieldDecorator('cardBack', {
              rules: [{ required: true, message: '请上传身份证反面！' }],
              initialValue: values.cardBack,
            })(
              <Upload {...customRequest2} fileList={cardBackList}>
                身份证反面
              </Upload>
            )
          : form.getFieldDecorator('cardBack', {
              rules: [{ required: true, message: '请上传身份证反面！' }],
              initialValue: values.cardBack,
            })(
              <Upload
                {...customRequest2}
                fileList={
                  values.cardBack
                    ? [
                        {
                          name: values.cardBack,
                          uid: 1,
                          url: values.cardBack,
                        },
                      ]
                    : []
                }
              >
                身份证反面
              </Upload>
            )}
      </FormItem>,
      this.state.value === 1
        ? [
            <FormItem key="brandLogo" {...this.formLayout} label="三证合一">
              {threeCardsTogetherList.length > 0
                ? form.getFieldDecorator('threeCardsTogether', {
                    rules: [{ required: true, message: '请上传三证合一！' }],
                    initialValue: values.threeCardsTogether,
                  })(
                    <Upload {...customRequest3} fileList={threeCardsTogetherList}>
                      三证合一
                    </Upload>
                  )
                : form.getFieldDecorator('threeCardsTogether', {
                    rules: [{ required: true, message: '请上传三证合一！' }],
                    initialValue: values.threeCardsTogether,
                  })(
                    <Upload
                      {...customRequest3}
                      fileList={
                        values.threeCardsTogether
                          ? [
                              {
                                name: values.threeCardsTogether,
                                uid: 1,
                                url: values.threeCardsTogether,
                              },
                            ]
                          : []
                      }
                    >
                      三证合一
                    </Upload>
                  )}
            </FormItem>,
          ]
        : [
            <FormItem key="businessLicense" {...this.formLayout} label="企业执照">
              {businessLicenseList.length > 0
                ? form.getFieldDecorator('businessLicense', {
                    rules: [{ required: true, message: '请上传企业执照！' }],
                    initialValue: values.businessLicense,
                  })(
                    <Upload {...customRequest4} fileList={businessLicenseList}>
                      企业执照
                    </Upload>
                  )
                : form.getFieldDecorator('businessLicense', {
                    rules: [{ required: true, message: '请上传企业执照！' }],
                    initialValue: values.businessLicense,
                  })(
                    <Upload
                      {...customRequest4}
                      fileList={
                        values.orgCode
                          ? [
                              {
                                name: values.businessLicense,
                                uid: 1,
                                url: values.businessLicense,
                              },
                            ]
                          : []
                      }
                    >
                      企业执照
                    </Upload>
                  )}
            </FormItem>,
            <FormItem key="orgCode" {...this.formLayout} label="组织机构代码">
              {orgCodeList.length > 0
                ? form.getFieldDecorator('orgCode', {
                    rules: [{ required: true, message: '请上传组织机构代码！' }],
                    initialValue: values.orgCode,
                  })(
                    <Upload {...customRequest5} fileList={orgCodeList}>
                      组织机构代码
                    </Upload>
                  )
                : form.getFieldDecorator('orgCode', {
                    rules: [{ required: true, message: '请上传组织机构代码！' }],
                    initialValue: values.orgCode,
                  })(
                    <Upload
                      {...customRequest5}
                      fileList={
                        values.orgCode
                          ? [
                              {
                                name: values.orgCode,
                                uid: 1,
                                url: values.orgCode,
                              },
                            ]
                          : []
                      }
                    >
                      组织机构代码
                    </Upload>
                  )}
            </FormItem>,
            <FormItem key="taxRegistration" {...this.formLayout} label="税务证">
              {taxRegistrationList.length > 0
                ? form.getFieldDecorator('taxRegistration', {
                    rules: [{ required: true, message: '请上传税务证！' }],
                    initialValue: values.taxRegistration,
                  })(
                    <Upload {...customRequest6} fileList={taxRegistrationList}>
                      税务证
                    </Upload>
                  )
                : form.getFieldDecorator('taxRegistration', {
                    rules: [{ required: true, message: '请上传税务证！' }],
                    initialValue: values.taxRegistration,
                  })(
                    <Upload
                      {...customRequest6}
                      fileList={
                        values.taxRegistration
                          ? [
                              {
                                name: values.taxRegistration,
                                uid: 1,
                                url: values.taxRegistration,
                              },
                            ]
                          : []
                      }
                    >
                      税务证
                    </Upload>
                  )}
            </FormItem>,
          ],
    ];
  };
  onClose = () => {
    const { handleModalVisible } = this.props;
    handleModalVisible(false, []);
    this.setState({
      value: 1,
      cardList: [],
      cardBackList: [],
      threeCardsTogetherList: [],
      businessLicenseList: [],
      orgCodeList: [],
      taxRegistrationList: [],
    });
  };

  //弹窗
  render() {
    const { handleModalVisible, modalVisible } = this.props;

    //完成
    const handleNext = () => {
      const { form, values, handleUpload } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        handleUpload(fieldsValue);
      });
    };
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={'上传材料'}
        visible={modalVisible}
        onOk={handleNext}
        onCancel={this.onClose}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default uploadFile;
